import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Col, Button, Form, Modal, Divider, Input } from 'antd';

import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;

const EditForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    handleModalVisible,
    handleEdit,
    detail,
    showType,
    showProtocol,
    showNet,
  } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleEdit(fieldsValue, form);
    });
  };

  return (
    <Modal
      title={formatMessage({ id: 'app.dm.product.edit' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <Divider orientation="left" style={{ color: '#999', margin: 0 }} dashed>
        <FormattedMessage id="app.dm.product.info" />
      </Divider>
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem>
          {form.getFieldDecorator('id', { initialValue: detail.id })(<Input type="hidden" />)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.dm.product.info.name' })} colon={false}>
          {form.getFieldDecorator('name', {
            rules: [
              { required: true, message: formatMessage({ id: 'app.dm.product.info.name.place' }) },
            ],
            initialValue: detail.name,
          })(<Input placeholder={formatMessage({ id: 'app.dm.product.info.name.place' })} />)}
        </FormItem>
        <FormItem label={<FormattedMessage id="app.dm.product.info.class" />} colon={false}>
          {detail.className}
        </FormItem>
        <FormItem label={<FormattedMessage id="app.dm.product.info.model" />} colon={false}>
          {detail.modelName}
        </FormItem>
      </div>
      <Divider orientation="left" style={{ color: '#999', margin: 0, marginTop: 24 }} dashed>
        <FormattedMessage id="app.dm.product.info.type" />
      </Divider>
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem label={formatMessage({ id: 'app.dm.product.info.type' })} colon={false}>
          {showType(detail.type)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.dm.product.info.isJoinGateway' })} colon={false}>
          {detail.isJoinGateway
            ? formatMessage({ id: 'app.dm.product.info.isJoinGateway.yes' })
            : formatMessage({ id: 'app.dm.product.info.isJoinGateway.no' })}
        </FormItem>
      </div>
      <Divider orientation="left" style={{ color: '#999', margin: 0, marginTop: 24 }} dashed>
        <FormattedMessage id="app.dm.product.info.netdata" />
      </Divider>
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem
          label={formatMessage({ id: 'app.dm.product.info.netdata.nettype' })}
          colon={false}
        >
          {showNet(detail.net)}
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.dm.product.info.netdata.protocol' })}
          colon={false}
        >
          {showProtocol(detail.protocol)}
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.dm.product.info.netdata.decoder' })}
          colon={false}
        >
          {detail.decoder}
        </FormItem>
      </div>
      <Divider orientation="left" style={{ color: '#999', margin: 0, marginTop: 24 }} dashed>
        <FormattedMessage id="app.dm.product.info.more" />
      </Divider>
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem label={formatMessage({ id: 'app.dm.product.info.more.desc' })} colon={false}>
          {form.getFieldDecorator('desc', {
            rules: [],
            initialValue: detail.desc,
          })(<TextArea rows={4} />)}
        </FormItem>
      </div>
    </Modal>
  );
});

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
class ProductInfo extends PureComponent {
  state = {
    modalVisible: false,
  };

  handleEdit = (fields, form) => {
    const { dispatch } = this.props;
    const { handleModalVisible } = this;
    dispatch({
      type: 'product/edit',
      payload: {
        id: fields.id,
        name: fields.name,
        desc: fields.desc,
      },
      form,
      handleModalVisible,
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  render() {
    const {
      product: { detail },
    } = this.props;

    const showType = val => {
      if (val === 1) {
        return formatMessage({ id: 'app.dm.product.info.type.device' });
      }
      if (val === 2) {
        return formatMessage({ id: 'app.dm.product.info.type.gateway' });
      }
      return null;
    };

    const showNet = val => {
      if (val === 1) {
        return formatMessage({ id: 'app.dm.product.info.netdata.nettype.wifi' });
      }
      if (val === 2) {
        return formatMessage({ id: 'app.dm.product.info.netdata.nettype.cellular' });
      }
      if (val === 3) {
        return formatMessage({ id: 'app.dm.product.info.netdata.nettype.ethernet' });
      }
      if (val === 4) {
        return formatMessage({ id: 'app.dm.product.info.netdata.nettype.other' });
      }
      return null;
    };

    const showProtocol = val => {
      if (val === 1) {
        return 'MQTT';
      }
      if (val === 2) {
        return 'TCP/IP';
      }
      if (val === 3) {
        return 'MODBUS-TCP';
      }
      return null;
    };

    const showState = val => {
      if (val === 1) {
        return formatMessage({ id: 'app.dm.product.info.state.developing' });
      }
      if (val === 2) {
        return formatMessage({ id: 'app.dm.product.info.state.published' });
      }
      return null;
    };

    const edit = (id, flag) => {
      this.setState({
        modalVisible: !!flag,
      });
    };

    const parentMethods = {
      handleModalVisible: this.handleModalVisible,
      handleEdit: this.handleEdit,
      detail,
      showType,
      showProtocol,
      showNet,
    };

    const { modalVisible } = this.state;

    return (
      <Fragment>
        <Row style={{ textAlign: 'right' }}>
          <Button onClick={() => edit(detail.id, true)} type="primary">
            <FormattedMessage id="app.dm.product.detail.info.edit" />
          </Button>
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {detail.name}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.type" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {showType(detail.type)}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.createtime" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {detail.createTime}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.model" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {detail.modelName}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.netdata.nettype" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {showNet(detail.net)}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.state" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {showState(detail.state)}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.isJoinGateway" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {detail.isJoinGateway
              ? formatMessage({ id: 'app.dm.product.info.isJoinGateway.yes' })
              : formatMessage({ id: 'app.dm.product.info.isJoinGateway.no' })}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.netdata.protocol" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {showProtocol(detail.protocol)}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.product.info.netdata.decoder" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {detail.decoder}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.product.info.more.desc" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={21}>
            {detail.desc}
          </Col>
        </Row>
        <EditForm {...parentMethods} modalVisible={modalVisible} />
      </Fragment>
    );
  }
}

export default ProductInfo;
